<template>
  <div>
    <!-- 猜你喜欢区域 -->
    <div class="guessYouLike">
      <!-- 猜你喜欢标题 -->
      <div class="guessYouLike-text-icon">
        <span class="iconfont guessYouLike-icon">&#xe65c;</span>
        <span class="guessYouLike-text">猜你喜欢</span>
      </div>
      <!-- 猜你喜欢城市列表 -->
      <ul class="likeList">
        <!-- 猜你喜欢城市图片 -->
        <router-link type="li" :to="'/detail/' + item.id" class="likePlace" v-for="item in likeList" :key="item.id">
          <img class="like-image" :src="item.url" />
          <!-- 猜你喜欢城市描述 -->
          <div class="like-detail">
            <span class="like-title">{{ item.title }}</span>
            <span class="like-introduction">{{ item.introduction }}</span>
            <div class="unit-price-start">
              <span class="unit">￥</span><span class="price">{{ item.price }}</span
              ><span class="start">起</span>
            </div>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: ['likeList'],
  data () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
.guessYouLike {
  border-top: 0.2rem solid #f5f3f3
}
.guessYouLike-text-icon {
  margin: 0.2rem 0 0.5rem 0.2rem
}
.guessYouLike-text {
  font-size: 0.32rem
}
.guessYouLike-icon {
  color: tomato;
}

.likePlace {
  display: flex
  flex-direction: row
  margin: 10px
  padding-bottom: 10px
  border-bottom: solid 1px #ececec
}
.like-image {
  width: 28%
}
.like-detail {
  display: flex
  flex-direction: column
  justify-content:space-around
  margin-left: 0.2rem
}
.like-title {
  font-size: 0.3rem
  font-weight: 600
  color: #3c3c3c
}
.like-introduction {
  font-size: 0.25rem
  color: #999
}
.unit {
  font-size: 0.2rem
  color: #ff8800
  margin-right: -0.05rem
}
.price {
  color: #ff8800
  font-size: 0.4rem
}
.start {
  font-size: 0.2rem
  color: #999
}
</style>
